import React, { useState, useEffect } from 'react'
import { Input, Tabs, Sticky, Card, Button, Toast } from 'react-vant'
import { ArrowLeft } from '@react-vant/icons'
import { history, useLocation } from 'umi'
import axios from 'axios'

export default function Tuikuan() {
    const loaction = useLocation()
    const [tui, settui] = useState([])
    
    const getbodylist = async (id) => {
        settui(loaction.state.obj)
        // const { data } = await axios.get('http://localhost:3000/zhifubody?tid=' + id)
        // if (data.code === 200) {
        //     settui(data.data)
        // }
    }
    useEffect(() => {
        getbodylist('6529266f93e836ec317e419a')
    }, [])

    const deles = async (id) => {
        await axios.get('http://localhost:3000/xiaoding/' + id)
        getbodylist('6529266f93e836ec317e419a')
        Toast.success('删除成功')
    }
    const tuixiang = (obj) => {
        history.push('/tuixiang', { obj: obj })
    }
    console.log(tui,"tuikuan");
    return (
        <div>

            <Sticky>
                <div style={{ background: "#fff" }}>
                    <p className='fanleft' style={{ display: "inline-block" }} onClick={() => history.push('/app/my', { ids: 0 })}><ArrowLeft fontSize={25} /></p>
                    <p style={{ display: "inline-block" }}>退款</p>
                </div>
            </Sticky>
            <div style={{ height: "120%", background: "#e2e2e2", paddingBottom: "10px" }}>
                {
                    tui.map((item2) => (

                        <Card key={item2._id}>
                            {
                                item2.price <= 10 ?
                                    <div>
                                        <div style={{ cursor: "pointer" }} onClick={() => xiang(item2)}>
                                            <Card.Header style={{ display: "inline-block", }}>{item2.bian}</Card.Header>
                                            <p style={{ color: "red", display: "inline-block", position: 'absolute', right: "20px", top: "8px" }}>已完成</p>

                                            <div style={{ textAlign: "center", marginBottom: "6px" }}>
                                                {
                                                    item2.imgs.map((item3, index3) => (
                                                        <div key={index3} style={{ display: "inline-block", margin: "0 5px 0 " }}>
                                                            <img src={item3.img} alt="" style={{ width: "80px", }} />
                                                            <p> X{item2.num}</p>
                                                        </div>
                                                    ))
                                                }
                                            </div>

                                            <div style={{ marginBottom: "10px", textAlign: "right", marginRight: "15px" }}>
                                                <p>共{item2.imgs.length}件商品，共计:<span style={{ color: "red" }}>￥{item2.num * item2.price}</span></p>
                                            </div>
                                        </div>
                                        <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                        <div style={{ lineHeight: "40px", float: "right", marginRight: "8px", paddingBottom: "10px" }}>
                                            <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}
                                                onClick={() => deles(item2._id)}
                                            >删除订单</Button>
                                            <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}
                                                onClick={() => tuixiang(item2)}
                                            >查看详情</Button>
                                        </div>
                                    </div>

                                    :

                                    <div>
                                        <div style={{ cursor: "pointer" }} onClick={() => xiang(item2)}>
                                            <Card.Header style={{ display: "inline-block", }}>{item2.bian}</Card.Header>
                                            <p style={{ color: "red", display: "inline-block", position: 'absolute', right: "20px", top: "8px" }}>处理中</p>
                                            {/* 图片 */}
                                            <div style={{ textAlign: "center", marginBottom: "6px" }}>
                                                {
                                                    item2.imgs.map((item3, index3) => (
                                                        <div key={index3} style={{ display: "inline-block", margin: "0 5px 0 " }}>
                                                            <img src={item3.img} alt="" style={{ width: "80px", }} />
                                                            <p> X{item2.num}</p>
                                                        </div>
                                                    ))
                                                }
                                            </div>
                                            {/* 商品数量 */}
                                            <div style={{ marginBottom: "10px", textAlign: "right", marginRight: "15px" }}>
                                                <p>共{item2.imgs.length}件商品，共计:<span style={{ color: "red" }}>￥{item2.num * item2.price}</span></p>
                                            </div>
                                        </div>
                                        <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                        <div style={{ lineHeight: "40px", float: "right", marginRight: "8px", paddingBottom: "10px" }}>
                                            <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}
                                                onClick={() => deles(item2._id)}
                                            >撤销申诉</Button>
                                            <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}
                                                onClick={() => tuixiang(item2)}
                                            >查看详情</Button>
                                        </div>
                                    </div>
                            }

                        </Card>
                    ))

                }
            </div>



        </div>
    )
}
